<template>
	<scroll-view class="scroll-view" scroll-with-animation scroll-y="true">
		<view class="header">
			<view class="header-inner">
				<view class="user-header">
					<image class="header-image" src="@/static/images/user-header.png" mode="aspectFill"></image>
				</view>
				<view class="title">
					Hi,{{userinfo.userName || "未知用户"}}，欢迎回来
				</view>
				<view></view>
			</view>
			<view class="operation-list">
				<view class="handle-item" @click="goshelfnumber">
					<view class="mubu left">
						<image class="handle-image" src="@/static/images/fi-sr-browser.svg" mode="aspectFill"></image>
						<view class="desc">
							扫描唛头号
						</view>
						<view class="desc">
							维护箱架号
						</view>
					</view>
					<view class="name">
						箱架号维护
					</view>
				</view>
				<view class="handle-item" @click="gopicturesandupload">
					<view class="mubu">
						<image class="handle-image" src="@/static/images/fi-sr-mode-landscape.svg" mode="aspectFill">
						</image>
						<view class="desc">
							快速上传
						</view>
						<view class="desc">
							各种图片
						</view>
					</view>
					<view class="name">
						拍照上传
					</view>
				</view>
				<view class="handle-item" @click="goanalysisreport">
					<view class="mubu right">
						<image class="handle-image" src="@/static/images/fi-br-pulse.svg" mode="aspectFill"></image>
						<view class="desc">
							展现各类
						</view>
						<view class="desc">
							数据信息
						</view>
					</view>
					<view class="name">
						分析报表
					</view>
				</view>
			</view>
		</view>


		<!-- 	<view class="system-message">
			系统提示
		</view> -->

		<view class="tabbar-list">
			<view :class="['tabbar-item',tabbar.value==active?'active':'']" v-for="(tabbar,index)  in tabbarList"
				:key="index" @click="handleTabbar(tabbar)">
				{{tabbar.title}}
			</view>
		</view>

		<view class="todo-list" v-if="dataList.length>0">


			<view class="todo-item" v-for="(item,index)  in dataList" :key="index" @click="putInStorage">
				<view class="left-circle"></view>
				<view class="main-context">
					<view class="title">
						{{item.title}}
					</view>
					<view class="detail">
						{{item.detail}}
					</view>
					<view class="createTime">
						{{ item.createTime  }}
					</view>
				</view>

			</view>

		</view>
		<no-Data v-else></no-Data>

		<view class="go-top" v-if="scrollTop>50" @click="handleBackTop">
			<image class="go-top-image" src="@/static/images/go-top.svg" mode="aspectFill">
			</image>
		</view>

		<view class="paging-roundness">
			{{dataList.length}}/{{total}}
		</view>
	</scroll-view>
</template>

<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		internalMessageList
	} from '@/api/message.js'
	import {
		formatting
	} from "@/utils/tools.js"


	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				active: 'pending',
				tabbarList: [{
					title: "待办信息",
					value: 'pending'
				}, {
					title: "预警通知",
					value: 'warn'
				}, {
					title: "系统消息",
					value: 'notice'
				}, ],
				show: true,
				columns: [
					['中国', '美国', '日本']
				],
				init: true,
				dataList: [],
				total: 0, //总条数
				data: {
					pageNum: 1, //第几页
					pageSize: 5, //显示多少条
				},
				scrollTop: 0
			}
		},
		methods: {
			handleBackTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			onReachBottom() { //触底事件
				console.log('触底事件')
				if (this.data.pageNum * this.data.pageSize >= this.total) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.data.pageNum <= this.data.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.data.pageNum++
						this.getInternalMessage()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
			initSearchParams() {
				this.dataList = []
				this.total = 0 //总条数
				this.data = {
					pageNum: 1, //第几页
					pageSize: 5, //显示多少条
				}
			},
			getInternalMessage() {
				let _this = this;
				if (this.init) {
					this.initSearchParams()
				}
				let params = {
					bizType: this.active,
					dateType: "all"
				}
				internalMessageList(params, this.data).then(res => {
					console.log('res...', res)
					if (res.code === 0) {
						let convertData = res.data.map(item => {
							item.createTime = formatting(item.createTime);
							return item;
						});
						if (this.init) {
							_this.dataList = convertData
						} else {
							_this.dataList.push(...convertData)
						}
						_this.total = res.total
					}
					_this.init = false
				})
			},
			handleTabbar(tabbar) {
				this.active = tabbar.value;
			},
			goshelfnumber() {
				this.$tab.navigateTo('/pages/list-of-rack-numbers/index')
			},
			gopicturesandupload() {
				this.$tab.navigateTo('/pages/photo-upload/index')
			},
			// goanalysisreport(){
			//  this.$modal.showToast('模块建设中~')
			// },
			// 分析报表
			goanalysisreport() {
				this.$tab.navigateTo('/pages/report-list/report-list')
			},
			putInStorage() {
				// this.$tab.navigateTo('/pages/weigh-for-storage/index')
			},
		},
		mounted() {
			// uni 查询dom
			//    uni.createSelectorQuery().select('.wrap').boundingClientRect(data=>{
			// 	console.log(data)
			// }).exec()
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		computed: {
			userinfo() {
				return this.$store.state.user.userinfo || {}
			},
		},
		watch: {
			active: {
				handler(newValue) {
					console.log(newValue)
					this.init = true
					this.getInternalMessage()

				},
				immediate: true // 初始化
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		width: 100%;
		height: initial;
		overflow-y: initial;
		min-height: 100vh;
		padding-top: 560rpx;
		background: var(--additional-colors-white, #FFF);
	}

	.header {
		width: 100%;
		height: 560rpx;
		flex-shrink: 0;
		border-radius: 0px 0px 80rpx 80rpx;
		background: #3461FD;
		// background: linear-gradient(180deg, rgba(52, 97, 253, 0.00) 0%, rgba(52, 97, 253, 0.92) 100%);
		position: fixed;
		top: 0;
		z-index: 999;
		padding-top: 120rpx;

		.header-inner {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 50rpx;
			padding-bottom: 80rpx;

			.title {
				color: #FFF;
				text-align: center;
				font-size: 33rpx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 800;
				line-height: 52rpx;
				letter-spacing: 0.09px;
			}

			.user-header {
				width: 106rpx;
				height: 106rpx;
				flex-shrink: 0;
				border-radius: 106rpx;
				border: 1px solid #FFF;
				background: url(<path-to-image>), lightgray 50% / cover no-repeat;
				overflow: hidden;
				margin-right: 40rpx;

				.header-image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}


	.todo-list {
		padding: 40rpx 30rpx;

		.todo-item {
			width: 100%;
			min-height: 160rpx;
			flex-shrink: 0;
			border-radius: 32rpx;
			background: #FFF;
			box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 40rpx;

			.left-circle {
				width: 28rpx;
				height: 14px;
				border-radius: 28rpx;
				background: #EB5757;
				flex-shrink: 0;
				margin-right: 30rpx;
			}

			.main-context {
				flex: 1;

				.title {
					color: #120B3C;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: normal;
					letter-spacing: 0.333px;
				}

				.detail {
					color: #9895AB;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: 34rpx;
					letter-spacing: 0.333px;
				}

				.createTime {
					color: #3461FD;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: 34rpx;
					letter-spacing: 0.333px;
				}
			}

		}
	}

	.operation-list {
		display: flex;
		justify-content: space-between;
		padding: 0 60rpx;

		.handle-item {
			color: white;
			text-align: center;

			.name {
				font-size: 24rpx;
			}

			.mubu {
				width: 160rpx;
				height: 140rpx;
				flex-shrink: 0;
				border-radius: 12rpx;
				background: rgba(0, 0, 0, 0.56);
				margin-bottom: 40rpx;
				text-align: center;

				.handle-image {
					position: relative;
					width: 76rpx;
					height: 76rpx;
					margin: -32rpx auto 0px;
					margin-bottom: 16rpx;
				}

				.desc {
					color: #FFF;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-style: normal;
					font-weight: 400;
					line-height: 30rpx;
				}
			}

			.left.mubu {
				border-bottom-left-radius: 40rpx;
			}

			.right.mubu {
				border-bottom-right-radius: 40rpx;
			}
		}

	}

	.system-message {
		color: #000;
		font-size: 72rpx;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 800;
		line-height: 70rpx;
		margin-top: 30rpx;
		padding-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.tabbar-list {
		display: flex;
		width: 100vw;
		padding: 32rpx 30rpx 0px;
		justify-content: space-between;
		align-items: center;

		// gap: 50px;
		.tabbar-item {
			width: 170rpx;
			height: 74rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
			background: #E1E8FF;
			line-height: 74rpx;
			text-align: center;
			color: #808080;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 400;
		}

		.tabbar-item.active {
			background: #3461FD;
			color: white;
		}

	}

	.go-top {
		position: fixed;
		z-index: 1000;
		right: 40rpx;
		bottom: 150rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFF;
		color: #9895AB;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		text-align: center;
		line-height: 80rpx;
		font-size: 16px;

		.go-top-image {
			width: 100%;
			height: 100%;
		}
	}

	.paging-roundness {
		position: fixed;
		z-index: 1000;
		right: 40rpx;
		bottom: 40rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFF;
		color: #9895AB;
		box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.08);
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
</style>